<template>
  <div>
    <div ref="container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { useRouter } from "vue-router";

const router = useRouter();

const data = reactive({
  name: "cwq",
});

let scene;
let camera;
let renderer;
let controls;
let group;

const init = () => {
  scene = new THREE.Scene();

  const point = new THREE.PointLight(0xffffff);
  point.position.set(400, 200, 300);
  scene.add(point);

  const ambient = new THREE.AmbientLight(0x444444);
  scene.add(ambient);

  const width = window.innerWidth;
  const height = window.innerHeight;

  camera = new THREE.PerspectiveCamera(40, width / height, 1, 10000);
  camera.position.set(0, 0, 3000);

  const createTextCanvas = (text, width, height) => {
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext("2d");
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    context.translate(width / 2, height / 2);
    context.fillStyle = "#ffffff";
    context.font = "48px Arial";
    context.textBaseline = "middle";
    context.textAlign = "center";
    context.fillText(text, 0, 0);
    return context.canvas;
  };

  const createS = (name) => {
    const textCanvas = createTextCanvas(name, 160, 80);

    const texture = new THREE.CanvasTexture(textCanvas);
    texture.generateMipmaps = false;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;

    const pinMaterial = new THREE.SpriteMaterial({
      map: texture,
    });

    const mesh = new THREE.Sprite(pinMaterial);
    mesh.name = name;

    const element = document.createElement("div");
    element.style.position = "absolute";
    element.style.width = "160px";
    element.style.height = "80px";
    element.style.cursor = "pointer";
    // // 添加点击事件监听器
    // element.addEventListener("click", () => {
    //   console.log("111");
    //   // 在这里执行您想要的操作
    // });

    mesh.element = element;

    return mesh;
  };

  group = new THREE.Group();

  for (let i = 0, l = 60; i < l; i++) {
    const phi = Math.acos(-1 + (2 * i) / l);
    const theta = Math.sqrt(l * Math.PI) * phi;

    // const name = "Object " + i;
    const name = data.name + i;
    console.log(name);
    const sprite = createS(name);
    sprite.scale.set(80, 40, 1);
    sprite.position.setFromSphericalCoords(800, phi, theta);

    group.add(sprite);
  }

  scene.add(group);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.shadowMap.enabled = false;
  renderer.setPixelRatio(window.devicePixelRatio);

  const container = ref(null);
  onMounted(() => {
    if (container.value) {
      container.value.appendChild(renderer.domElement);

      controls = new OrbitControls(camera, renderer.domElement);
    }
  });

  return { container };
};

const animate = () => {
  requestAnimationFrame(animate);
  group.rotateY(-0.001);
  group.rotateX(0.001);

  if (controls) {
    controls.update();
  }

  renderer.render(scene, camera);
};

const { container } = init();
animate();

// 添加点击事件监听器到渲染器
if (renderer) {
  renderer.domElement.addEventListener("click", (event) => {
    event.preventDefault();
    const mouse = new THREE.Vector2(
      (event.clientX / window.innerWidth) * 2 - 1,
      -(event.clientY / window.innerHeight) * 2 + 1
    );
    // const raycaster = new THREE.Raycaster();
    // raycaster.setFromCamera(mouse, camera);
    // const intersects = raycaster.intersectObjects(group.children);

    // if (intersects.length > 0) {
    //   console.log(intersects[0].object.name + " is clicked.");

    //   router.push("/movie");
    // }
  });
}
</script>
